<template>
  <transition enter-active-class="slideInUp faster animated" leave-active-class="slideOutDown faster animated">
    <div class="chooseSingerModule" v-show="isShowAni">
      <div class="chooseSingerBox publicVCenter">
        <!-- 头部和关闭按钮 -->
        <img src="@/assets/image/popupArea/closeIcon.png" class="closeIcon" v-tap="{ methods: closePopupModule }" />
        <img src="@/assets/image/popupArea/chooseSongTitle.png" class="chooseSingerTitle" />

        <!-- 歌手列表区域 -->
        <div class="singer-list-wrap">
          <div class="singer-grid">
            <div
              class="singer-card"
              :class="{ selected: currentSingerId === singer.awardid }"
              v-for="singer in singerList"
              :key="singer.awardid"
              v-tap="{ methods: handleSelectSinger, singerId: singer.awardid }"
            >
              <div class="singer-image-wrapper">
                <img :src="singer.avator" class="singer-image" />
                <div class="singer-name">{{ singer.name || '未知歌手' }}</div>
                <img v-if="currentSingerId === singer.awardid" src="@/assets/image/popupArea/tickIcon.png" class="tick-icon" />
              </div>
              <div class="singer-desc">{{ singer.name || '歌手名字' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import { POPUP_MODULE } from '@/assets/constant/index';
import { getSingerList, getSongSheetList, getSongOrderedList } from '@/api/music/index';
import { timeoutTask } from '../../utils';

export default {
  name: 'chooseSingerPopup',
  computed: {
    ...mapState({
      singerList: (state) => state.app.singerList,
      currentSingerId: (state) => state.app.currentSingerId,
    }),
  },
  watch: {
    // 监听弹窗显示状态，每次打开时刷新数据
    isShowAni(newVal) {
      if (newVal) {
        this.fetchSingerList();
      }
    },
  },
  created() {},
  mounted() {
    // 执行弹出动画
    this.showAniStart();
  },
  data() {
    return {
      isShowAni: false, // chooseSinger box弹出动画
      chooseSingerModuleKey: POPUP_MODULE.chooseSingerModule.key,
      chooseSongModuleKey: POPUP_MODULE.chooseSongModule.key,
    };
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
      setSingerList: 'app/setSingerList',
      setCurrentSingerId: 'app/setCurrentSingerId',
      setSongSheetList: 'app/setSongSheetList',
      setSongOrderList: 'app/setSongOrderList',
    }),
    showAniStart() {
      this.isShowAni = true;
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    closePopupModule() {
      this.hideAniStart();
      timeoutTask(() => {
        this.togglePopup();
      }, 200);
    },
    // 获取歌手列表
    fetchSingerList() {
      getSingerList()
        .then((res) => {
          const singerList = res.singerList || res.list || [];
          this.setSingerList(singerList);
          // 如果没有选中歌手且有列表，默认选中第一个
          if (singerList.length > 0 && !this.currentSingerId) {
            this.setCurrentSingerId(singerList[0].awardid);
          }
        })
        .catch((err) => {
          console.error('获取歌手列表失败:', err);
        });
    },
    // 处理选中歌手
    async handleSelectSinger(p) {
      const { singerId } = p;

      // 不再区分是不是同一个歌手，统一都请求
      this.setCurrentSingerId(singerId);
      this.$loading('加载歌曲中...');
      try {
        const songRes = await getSongSheetList(singerId);
        this.setSongSheetList(songRes.list || []);
        await this.fetchOrderedSongList(singerId);
      } catch (err) {
        console.error(`Failed to fetch songs for singer ${singerId}:`, err);
      } finally {
        this.$loading.close();
      }
      // 打开选歌弹窗
      this.hideAniStart();
      this.togglePopup();
      timeoutTask(() => {
        this.togglePopup(this.chooseSongModuleKey);
      }, 250);
    },
    fetchOrderedSongList(singerId = '') {
      return getSongOrderedList(singerId)
        .then((res) => {
          this.setSongOrderList(res.list || []);
        })
        .catch((err) => {
          console.error('获取已点歌曲列表失败:', err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.chooseSingerModule {
  position: absolute;
  width: 100%;
  bottom: 0;
  .chooseSingerBox {
    width: 750px;
    height: 97vh;
    background-image: url('../../assets/image/popupArea/chooseSongBg.png');
    background-size: 100% 100%;
    flex-direction: column;
    position: relative;
    .closeIcon {
      width: 48px;
      height: 48px;
      position: absolute;
      right: 16px;
      top: 4px;
    }
    .chooseSingerTitle {
      width: 342px;
      height: 72px;
    }
    .singer-list-wrap {
      width: 100%;
      height: calc(97vh - 120px);
      overflow-y: auto;
      margin-top: 20px;
      padding: 0 24px 20px;
      box-sizing: border-box;
    }
    .singer-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: flex-start;
    }
    .singer-card {
      width: 48%;
      margin-bottom: 24px;
      background: #3c2183;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      .singer-image-wrapper {
        width: 100%;
        height: 280px;
        position: relative;
        overflow: hidden;
        .singer-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .singer-name {
          position: absolute;
          top: 0;
          left: 0;
          background: linear-gradient(270deg, #7F02F6 0%, #DD01FF 100%);
          border-radius: 14px 0px 14px 0px;
          font-size: 28px;
          color: #FFFFFF;
          padding: 12px 20px;
          max-width: 100%;
          box-sizing: border-box;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          z-index: 5;
        }
        .tick-icon {
          position: absolute;
          bottom: 16px;
          right: 16px;
          width: 48px;
          height: 48px;
          z-index: 10;
        }
      }
      // 选中状态：添加边框
      &.selected {
        .singer-image-wrapper {
          .singer-image {
            border: 4px solid #B15BFF;
            box-sizing: border-box;
          }
        }
      }
      .singer-desc {
        font-size: 18px;
        color: #c2baf5;
        padding: 4px 20px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 54px;
      }
    }
  }
}
</style>
